import { Select } from "antd"
import dayjs from "dayjs"
import { FC, useEffect } from "react"

import { SFormItem } from "@/components/common"
import { useLocale } from "@/locales"

interface IOptionMemberBillList {
	billType: number
	periodEnDate: number
	periodStDate: number
}

const BillTypeSelectSettlementCycle: FC<{ onDefaultTimeSelect?: any; options?: any; onChange?: any; width?: number }> = ({
	onDefaultTimeSelect,
	options,
	onChange,
	width = 400
}) => {
	const { newFormat } = useLocale()

	useEffect(() => {
		onDefaultTimeSelect(billDateList?.[1]?.label)
	}, [options])

	const billDateList = options.map((item: IOptionMemberBillList) => {
		const startTime = dayjs(String(item.periodStDate)).format("YYYY-MM-DD") + " 00:00:00"
		const endTime = dayjs(String(item.periodEnDate)).format("YYYY-MM-DD") + " 23:59:59"

		return {
			value: `${startTime} ${newFormat("funds.fund_audit.to")} ${endTime}`,
			label: `${startTime} ${newFormat("funds.fund_audit.to")} ${endTime}`,
			periodStDate: item.periodStDate,
			periodEnDate: item.periodEnDate,
			periodStStr: startTime,
			periodEnStr: endTime
		}
	})

	if (billDateList.length > 4) {
		billDateList.push({
			value: `${billDateList[4].periodStStr} ${newFormat("funds.fund_audit.to")} ${billDateList[1].periodEnStr} (${newFormat(
				"funds.fund_audit.last_4"
			)})`,
			label: `${billDateList[4].periodStStr} ${newFormat("funds.fund_audit.to")} ${billDateList[1].periodEnStr} (${newFormat(
				"funds.fund_audit.last_4"
			)})`,
			periodStDate: billDateList[4].periodStDate,
			periodEnDate: billDateList[1].periodEnDate
		})
	}
	if (billDateList.length > 8) {
		billDateList.push({
			value: `${billDateList[8].periodStStr} ${newFormat("funds.fund_audit.to")} ${billDateList[1].periodEnStr} (${newFormat(
				"funds.fund_audit.last_8"
			)})`,
			label: `${billDateList[8].periodStStr} ${newFormat("funds.fund_audit.to")} ${billDateList[1].periodEnStr} (${newFormat(
				"funds.fund_audit.last_8"
			)})`,
			periodStDate: billDateList[8].periodStDate,
			periodEnDate: billDateList[8].periodEnDate
		})
	}
	if (billDateList.length > 12) {
		billDateList.push({
			value: `${billDateList[12].periodStStr} ${newFormat("funds.fund_audit.to")} ${billDateList[1].periodEnStr} (${newFormat(
				"funds.fund_audit.last_12"
			)})`,
			label: `${billDateList[12].periodStStr} ${newFormat("funds.fund_audit.to")} ${billDateList[1].periodEnStr} (${newFormat(
				"funds.fund_audit.last_12"
			)})`,
			periodStDate: billDateList[12].periodStDate,
			periodEnDate: billDateList[12].periodEnDate
		})
	}

	console.log("billDateList", billDateList)

	return (
		<SFormItem name="timeSelect" label={newFormat("funds.proxy_member_funds_record.settlement_cycle")}>
			<Select
				defaultValue={billDateList?.[1]?.label}
				onChange={e => onChange(e)}
				placeholder={newFormat("dxn.hand_account.please_select")}
				options={billDateList}
				style={{ width: width }}
			/>
		</SFormItem>
	)
}

export default BillTypeSelectSettlementCycle
